<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column align="center" prop="name" label="房间名"/>
        <el-table-column align="center"  label="操作">
            <template #default="scope">
                <el-link style="font-size: 14px"style="font-size: 14px" title="进入" type="primary" @click="selectRoom(scope.row)">
                    <el-icon :size="15">
                        <Aim />
                    </el-icon>
                </el-link>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>

    import request from '@/utils/request.js'
    import Tank from '../../../views/recreation/tank.js'
    import { ElMessage } from 'element-plus'
    import {ref, reactive, onMounted, nextTick} from 'vue'
    let emits = defineEmits(['selectRoom'])
    let tableData = reactive([
        {
            id: 1,
            roomName: 'Tom1',
        },
        {
            id: 2,
            roomName: 'Tom2',
        },
        {
            id: 3,
            roomName: 'Tom3',
        },
        {
            id: 4,
            roomName: 'Tom4',
        },
    ])
    onMounted(() => {
        request.post("/api/tank-online/getGameRooms", {}).then(resp => {
            tableData.splice(0, tableData.length)
            for (let i = 0; i < resp.length; i++) {
                tableData[i] = resp[i]
            }
        })
    })
    function selectRoom(row) {
        emits('selectRoom', row)
    }
</script>
<style lang="css" scoped>
    .address {overflow:hidden;white-space:nowrap;word-wrap:break-word;text-overflow:"ellipsis";}
    .head {background-color: #9561cc}
    [v-cloak]{
        display: none  !important;
    }
    .demo-form-inline{
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    .tank{
        position:absolute;
        width: 4rem;
        height: 4rem;
        background-image: url('/tank/GoodTank1.png');
        background-size: cover
    }
    .cloud{
        position:absolute;
        width: 4rem;
        height: 4rem;
        background-color: #ccc;
        z-index: 10;
    }
    .tankBad{
        position:absolute;
        width: 4rem;
        height: 4rem;
        background-image: url('/tank/tank_.png');
        background-size:cover;
    }
    .bulletRight{
        position:absolute;
        width: 1.5rem;
        height: .5rem;
        background-image: url('/tank/bulletR.png');
        background-size: cover
    }
    .bulletLeft{
        position:absolute;
        width: 1.5rem;
        height: .5rem;
        background-image: url('/tank/bulletL.png');
        background-size: cover
    }
    .bulletUp{
        position:absolute;
        width: .5rem;
        height: 1.5rem;
        background-image: url('/tank/bulletU.png');
        background-size: cover
    }
    .bulletDown{
        position:absolute;
        width: .5rem;
        height: 1.5rem;
        background-image: url('/tank/bulletD.png');
        background-size: cover
    }

    .turnDown{
        transform : rotate(180deg)
    }

    .turnUp{
        transform : rotate(0deg)
    }

    .turnLeft{
        transform : rotate(270deg)
    }

    .turnRight{
        transform : rotate(90deg)
    }

    .tankArea{
        background-color: #cbdcff;
        overflow: hidden;
        border-radius: 5px;
        position: relative;
        outline-offset: -1px;
    }

    .tankArea:focus{
        outline: none;
        box-shadow: 0 0 0 1px #7081ff, 0 0 0 2px white, 0 0 0 3px #7081ff;
    }
    </style>